/* -----------------------------------------------
				CSS Styles Dark
--------------------------------------------------

    Template Name: Baha - Personal Portfolio Template
    Author: Malyarchuk
    Copyright: 2019

--------------------------------------------------

Table of Content

	1. Body and Core Css
	2. Section Css
	3. Menu Css
	4. Home Section
	5. About Section
	6. Resume Section
	7. Portfolio Section
	8. Blog Section
	9. Contact Section
	10. Blog Page Css
	11. Blog List Css
	12. Preloader Css
	13. Tooltip Css
	14. Responsible Css
	15. Animation Css

	----------------------------------- */

/* -----------------------------------
		1. Body and Core Css
		----------------------------------- */

		@import url('../css.css');

		* {
			margin: 0;
			padding: 0;
			font-family: inherit;
			outline: none !important;
			list-style: none !important;
			text-decoration: none !important;
		}

		*:after, 
		*:before {
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			padding: 0;
			margin: 0;
		}

		body {
			font-family: 'Poppins',sans-serif;
			font-size: 14px;
			color: #fff;
			overflow: hidden;
			letter-spacing: 0.8px;
			background-color: #1a2a41;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		a {
			color: #fff;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		a:hover, 
		a:focus {
			color: #fff;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin: 0;
			padding: 0; 
			color: #fff;
			font-weight: 600;
		}

		h1 {
			font-size: 70px;
		}

		h2 {
			font-size: 35px;
		}

		h3 {
			font-size: 26px;
		}

		h4 {
			font-size: 18px;
		}

		i, em {
			font-style: normal; 
		}

		img {
			max-width: 100%;
		}

		blockquote {
			position: relative;
			padding: 30px;
			background-color: rgba(0, 0, 0, .5);
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}

		blockquote span {
			display: block;
			font-size: 14px;
			margin-top: 20px;
		}

		blockquote span img {
			width: 40px;
			height: 40px;
			margin-right: 10px;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}

		/* Button Style */
		.btn-st {
			position: relative;
			display: inline-block;
			color: #fff;
			cursor: pointer;
			font-size: 18px;
			font-weight: 100;
			background-color: transparent;
			border: none;
			z-index: 2;
		}

		.btn-st:before {
			content: '';
			position: absolute;
			width: 40%;
			height: 200%;
			top: -50%;
			left: -15%;
			background: #0e0f10;
			padding: 0px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			z-index: -1;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.btn-st:after {
			content: '';
			position: absolute;
			width: 110%;
			height: 10%;
			top: 105%;
			left: -5%;
			background: #fff;
			padding: 0px;
			z-index: 0;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.btn-st:hover:before {
			-webkit-border-radius: unset;
			border-radius: unset;
			-webkit-transform: translateX(120%) scaleX(3) scaleY(0.8);
			-ms-transform: translateX(120%) scaleX(3) scaleY(0.8);
			transform: translateX(120%) scaleX(3) scaleY(0.8);
		}

		.btn-st:hover:after {
			-webkit-transform: translateX(-55%) translateY(-550%) rotate(90deg) scaleX(0.3);
			-ms-transform: translateX(-55%) translateY(-550%) rotate(90deg) scaleX(0.3);
			transform: translateX(-55%) translateY(-550%) rotate(90deg) scaleX(0.3);
		}

		.pt-about .price .footer-price .btn-st:before,
		.pt-blog .blog-item .blog-btn .btn-st:before {
			height: 165%;
			top: -30%;
		}

		.pt-about .price .footer-price .btn-st,
		.pt-blog .blog-item .blog-btn .btn-st {
			font-size: 16px;
		}

		/* Music Bg */
		.music-bg {
			display: block;
			cursor: pointer;
			padding: 40px 0;
			text-align: center;
			border-top: 5px solid #0e0f10;
			visibility: hidden;
			z-index: 10;
			-webkit-transition: all .3s ease;
			-moz-transition: all .3s ease;
			-o-transition: all .3s ease;
			transition: all 0.3s ease;
		}

		.music-bg p {
			margin: 0;
			font-size: 13px;
			font-weight: 600;
		}

		.music-bg .lines {
			display: flex;
			width: 24px;
			height: 24px;
			margin: 0 auto 10px;
			align-items: flex-end;
		}

		.music-bg .lines span {
			display: inline-flex;
			margin: 0px 1px;
			width: 7px;
			height: 5px;
			background: #fff;
		}

		.audio-on .music-bg .lines span:nth-child(1) {
			-webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
			animation: musicline 2s 0.5s ease-out alternate infinite;
		}  

		.audio-on .music-bg .lines span:nth-child(2) {
			-webkit-animation: musicline 2s 1s ease-out alternate infinite;
			animation: musicline 2s 1s ease-out alternate infinite;
		} 

		.audio-on .music-bg .lines span:nth-child(3) {
			-webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
			animation: musicline 2s 1.5s ease-out alternate infinite;
		}

		.audio-on .music-bg .lines span:nth-child(4) {
			-webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
			animation: musicline 2s 0.25s ease-out alternate infinite;
		}

		.audio-on .music-bg .lines span:nth-child(5) {
			-webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
			animation: musicline 2s 0.75s ease-out alternate infinite;
		}

		.audio-on .music-bg .lines span:nth-child(6) {
			-webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
			animation: musicline 2s 1.25s ease-out alternate infinite;
		}

		/* ---------- Margin & Padding --------- */

		.mt-0 {
			margin-top: 0 !important;
		}
		.mt-5 {
			margin-top: 5px !important;
		}
		.mt-10 {
			margin-top: 10px !important;
		}
		.mt-15 {
			margin-top: 15px !important;
		}
		.mt-20 {
			margin-top: 20px !important;
		}
		.mt-25 {
			margin-top: 25px !important;
		}
		.mt-30 {
			margin-top: 30px !important;
		}
		.mt-35 {
			margin-top: 35px !important;
		}
		.mt-40 {
			margin-top: 40px !important;
		}
		.mt-45 {
			margin-top: 45px !important;
		}
		.mt-50 {
			margin-top: 50px !important;
		}
		.mt-55 {
			margin-top: 55px !important;
		}
		.mt-60 {
			margin-top: 60px !important;
		}
		.mt-65 {
			margin-top: 65px !important;
		}
		.mt-70 {
			margin-top: 70px !important;
		}
		.mt-75 {
			margin-top: 75px !important;
		}
		.mt-80 {
			margin-top: 80px !important;
		}
		.mt-85 {
			margin-top: 85px !important;
		}
		.mt-90 {
			margin-top: 90px !important;
		}
		.mt-95 {
			margin-top: 95px !important;
		}
		.mt-100 {
			margin-top: 100px !important;
		}

		/* Custom Margin Bottom */
		.mb-0 {
			margin-bottom: 0 !important;
		}
		.mb-5 {
			margin-bottom: 5px !important;
		}
		.mb-10 {
			margin-bottom: 10px !important;
		}
		.mb-15 {
			margin-bottom: 15px !important;
		}
		.mb-20 {
			margin-bottom: 20px !important;
		}
		.mb-25 {
			margin-bottom: 25px !important;
		}
		.mb-30 {
			margin-bottom: 30px !important;
		}
		.mb-35 {
			margin-bottom: 35px !important;
		}
		.mb-40 {
			margin-bottom: 40px !important;
		}
		.mb-45 {
			margin-bottom: 45px !important;
		}
		.mb-50 {
			margin-bottom: 50px !important;
		}
		.mb-55 {
			margin-bottom: 55px !important;
		}
		.mb-60 {
			margin-bottom: 60px !important;
		}
		.mb-65 {
			margin-bottom: 65px !important;
		}
		.mb-70 {
			margin-bottom: 70px !important;
		}
		.mb-75 {
			margin-bottom: 75px !important;
		}
		.mb-80 {
			margin-bottom: 80px !important;
		}
		.mb-85 {
			margin-bottom: 85px !important;
		}
		.mb-90 {
			margin-bottom: 90px !important;
		}
		.mb-95 {
			margin-bottom: 95px !important;
		}
		.mb-100 {
			margin-bottom: 100px !important;
		}
		.m-0 {
			margin: 0px !important;
		}

		/* Custom Padding top */
		.pt-0 {
			padding-top: 0 !important;
		}
		.pt-5 {
			padding-top: 5px !important;
		}
		.pt-10 {
			padding-top: 10px !important;
		}
		.pt-15 {
			padding-top: 15px !important;
		}
		.pt-20 {
			padding-top: 20px !important;
		}
		.pt-25 {
			padding-top: 25px !important;
		}
		.pt-30 {
			padding-top: 30px !important;
		}
		.pt-35 {
			padding-top: 35px !important;
		}
		.pt-40 {
			padding-top: 40px !important;
		}
		.pt-45 {
			padding-top: 45px !important;
		}
		.pt-50 {
			padding-top: 50px !important;
		}
		.pt-55 {
			padding-top: 55px !important;
		}
		.pt-60 {
			padding-top: 60px !important;
		}
		.pt-65 {
			padding-top: 65px !important;
		}
		.pt-70 {
			padding-top: 70px !important;
		}
		.pt-75 {
			padding-top: 75px !important;
		}
		.pt-80 {
			padding-top: 80px !important;
		}
		.pt-85 {
			padding-top: 85px !important;
		}
		.pt-90 {
			padding-top: 90px !important;
		}
		.pt-95 {
			padding-top: 95px !important;
		}
		.pt-100 {
			padding-top: 100px !important;
		}

		/* Custom Padding top */
		.pb-0 {
			padding-bottom: 0 !important;
		}
		.pb-5 {
			padding-bottom: 5px !important;
		}
		.pb-10 {
			padding-bottom: 10px !important;
		}
		.pb-15 {
			padding-bottom: 15px !important;
		}
		.pb-20 {
			padding-bottom: 20px !important;
		}
		.pb-25 {
			padding-bottom: 25px !important;
		}
		.pb-30 {
			padding-bottom: 30px !important;
		}
		.pb-35 {
			padding-bottom: 35px !important;
		}
		.pb-40 {
			padding-bottom: 40px !important;
		}
		.pb-45 {
			padding-bottom: 45px !important;
		}
		.pb-50 {
			padding-bottom: 50px !important;
		}
		.pb-55 {
			padding-bottom: 55px !important;
		}
		.pb-60 {
			padding-bottom: 60px !important;
		}
		.pb-65 {
			padding-bottom: 65px !important;
		}
		.pb-70 {
			padding-bottom: 70px !important;
		}
		.pb-75 {
			padding-bottom: 75px !important;
		}
		.pb-80 {
			padding-bottom: 80px !important;
		}
		.pb-85 {
			padding-bottom: 85px !important;
		}
		.pb-90 {
			padding-bottom: 90px !important;
		}
		.pb-95 {
			padding-bottom: 95px !important;
		}
		.pb-100 {
			padding-bottom: 20px !important;
		}
		.p-0 {
			padding: 0 !important;
		}

/* -----------------------------------
		3. Section Css
		----------------------------------- */
		/* Addition Background */
		.addition-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			overflow: hidden;
			z-index: -1;
		}

		/* Fullscreen Slider */
		.slide-kenburns-bg {
			position: relative;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			overflow: hidden;
			z-index: 0;
		}

		.slide-kenburns {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			-webkit-animation: kenburnsSlide 18s linear infinite 0s;
			animation: kenburnsSlide 18s linear infinite 0s;
			opacity: 0;
		}

		.slide-kenburns-1 {
			background-image: url(../img/slider/slide-1.jpg);
		}

		.slide-kenburns-2 {
			background-image: url(../img/slider/slide-2.jpg);
		}

		.slide-kenburns-3 {
			background-image: url(../img/slider/slide-3.jpg);
		}

		.slide-kenburns-1, 
		.slide-kenburns-2, 
		.slide-kenburns-3 {
			background-repeat: no-repeat;
			background-position: center;
			-webkit-background-size: cover;
			background-size: cover;
		}

		.slide-kenburns-1 {
			opacity: 1;
		}

		.slide-kenburns-2 {
			-webkit-animation-delay: 6s;
			animation-delay: 6s;
		}

		.slide-kenburns-3 {
			-webkit-animation-delay: 12s;
			animation-delay: 12s;
		}

		/* YouTube Video */
		#video-container {
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
		}

		/* Html Video */
		.html-video-container {
			position: absolute;
			top: 50%;
			left: 50%;
			width: auto;
			min-width: 100%;
			height: auto;
			min-height: 100%;
			background: #000;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			z-index: 0;
		}

		/* Particles */
		#particles-js {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		/* Glitch */
		.glitch {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-image: url('../img/home-bg.jpg');
			background-size: cover;
			-webkit-background-size: cover;
			background-position: center;
			z-index: -1 !important;
		}

		.page {
			position: fixed;
			width: calc(90% + 2px);
			height: 100%;
			color: #fff;
			margin: 0;
			padding: 0;
			overflow: auto; 
			-webkit-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
			-moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
			-o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);  
			transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
		}

		#about:target .pt-home, 
		#resume:target .pt-home,
		#portfolio:target .pt-home,
		#blog:target .pt-home,
		#contact:target .pt-home {
			-webkit-filter: blur(3px);
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease;
		}

		.pt-about, 
		.pt-resume, 
		.pt-portfolio, 
		.pt-blog,
		.pt-contact {
			background-color: #0e0f10;
		}

		#about:target .pt-about,
		#resume:target .pt-resume,
		#portfolio:target .pt-portfolio,
		#blog:target .pt-blog,
		#contact:target .pt-contact {
			transition-delay: .3s;
		}

		.page .header-page {
			position: relative;
			text-align: center;
		}

		.page .header-page:after,
		.page .header-page:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 1px;
			left: calc(50% - 46px);
			bottom: -19px;
			background-color: #fff;
		}

		.page .header-page:before {
			left: calc(50% + 16px);
		}

		.page .header-page span {
			position: absolute;
			width: 35px;
			height: 17px;
			left: calc(50% - 17px);
			margin-top: 10px;
		}

		.page .header-page span:before,
		.page .header-page span:after {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			top: 0;
			left: 0;
			border: 2px solid #fff;
			-moz-border-radius: 50px 50px 0;
			border-radius: 50px 50px 0 50px;
			-webkit-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		.page .header-page span:after {
			left: auto;
			right: 0;
			-webkit-border-radius: 50px 50px 50px 0;
			border-radius: 50px 50px 50px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.page .header-box,
		.blog-page .header-box {
			position: relative;
			text-align: center;
		}

		.page .header-box:before,
		.blog-page .header-box:before {
			content: '';
			position: absolute;
			width: 14px;
			height: 14px;
			left: calc(50% - 7px);
			bottom: -16px;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 3px solid #fff;
		}

		.page .header-box h3:before,
		.blog-page .header-box h3:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 1px;
			left: calc(50% - 45px);
			bottom: -10px;
			background-color: #fff;
		}

		.page .header-box h3:after,
		.blog-page .header-box h3:after {
			content: '';
			position: absolute;
			width: 30px;
			height: 1px;
			left: calc(50% + 15px);
			bottom: -10px;
			background-color: #fff;
		}

		.page .box,
		.blog-page .box {
			position: relative;
			padding: 30px;
			background-color: rgba(0, 0, 0, .5);
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.page .box:hover,
		.blog-page .box:hover {
			-webkit-transform: translateY(-5px);
			-ms-transform: translateY(-5px);
			transform: translateY(-5px);
		}

/* ------------------------------
		3. Menu Css
		------------------------------ */

		.header-main {
			position: fixed;
			width: 10%;
			height: 100%;
			top: 0;
			overflow: auto;
			overflow-x: hidden;
			background-color: rgba(14, 15, 16, .6);
			z-index: 99;
		}

		.header-main ul li {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 27px;
			margin: 30px 0;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.header-main ul li span.active {
			color: #fff;
		}

		#about:target .header-main ul li a,
		#resume:target .header-main ul li a,
		#portfolio:target .header-main ul li a,
		#blog:target .header-main ul li a,
		#contact:target .header-main ul li a {
			-webkit-transform: scale(.8);
			-ms-transform: scale(.8);
			transform: scale(.8);
		} 

		#about:target .icon-a,
		#resume:target .icon-r,
		#portfolio:target .icon-p,
		#blog:target .icon-b,
		#contact:target .icon-c {
			color: #fff;
			-webkit-transform: scale(1.3) !important;
			-ms-transform: scale(1.3) !important;
			transform: scale(1.3) !important;
		}

		/* Logo */
		.header-main .logo {
			text-align: center;
			padding: 40px 0;
			border-bottom: 5px solid #0e0f10;
		}

		.header-mobile {
			position: fixed;
			top: 0;
			left: 0;
			height: 50px;
			width: 100%;
			background-color: #070708;
			box-shadow: 0 0px 50px 0 #000;
			z-index: 10;
			display: none;
			-webkit-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.header-mobile h2 {
			position: absolute;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			display: inline-block;
			color: #fff;
			font-size: 24px;
			text-transform: uppercase;
			line-height: 50px;
			white-space: nowrap;
		}

		.header-mobile .header-toggle {
			font-size: 20px;
			line-height: 50px;
			cursor: pointer;
			width: 50px;
			text-align: center;
		}

		.header-mobile .header-toggle i {
			color: #fff;
			margin-top: 14px;
		}

/* ------------------------------
		4. Home Section
		------------------------------ */

		.pt-home {
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			overflow: hidden; 
			background-size: cover;
			-webkit-background-size: cover;
			background-position: center;
		}

		.pt-home:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: .5;
			background-color: #12171b;
		}

		.pt-home .banner {
			position: absolute;
			width: 90%;
			top: 50%;
			color: #fff;
			text-align: center;
			-webkit-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			transform: translateY(-50%);
		}

		.pt-home .banner h1 {
			color: #fff;
			margin-bottom: 15px;
		}

		.pt-home .banner p {
			color: #fff;
			font-size: 30px;
		}

		/* Social */
		.pt-home .social {
			position: absolute;
			width: 40px;
			height: 120px;
			top: 20px;
			z-index: 1;
		}

		.pt-home .social ul li {
			display: inline-block;
		}

		.pt-home .social ul li i {
			color: #fff;
			width: 40px;
			height: 40px;
			font-size: 16px;
			line-height: 40px;
			text-align: center;
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease;
		}

		.pt-home .social ul li i:hover {
			color: #fff;
			-webkit-transform: scale(1.3);
			-ms-transform: scale(1.3);
			transform: scale(1.3);
		}

		/* Language */
		.pt-home .lang {
			position: absolute;
			bottom: 30px;
			z-index: 1;
		}

		.pt-home .lang ul {
			margin: 0;
		}

		.pt-home .lang ul li {
			display: inline-block;
			margin: 0 10px;
		}

		.pt-home .lang ul li a {
			color: #a0a0a0;
			font-size: 11px;
			letter-spacing: 2px;
			text-transform: uppercase;
			-webkit-transition: all .5s ease;
			-moz-transition: all .5s ease;
			-o-transition: all .5s ease;
			transition: all .5s ease;
		}

		.pt-home .lang ul li a:hover {
			color: #fff;
		}

		.pt-home .lang ul li a.active {
			color: #fff;
			border-bottom: 1px solid #fff;
		}

/* ---------------------------------
		5. About Section
		--------------------------------- */

		/* User Info Block */
		.pt-about .info .photo img {
			-webkit-border-radius: 100%;
			border-radius: 100%;
		}

		.pt-about .info .loc {
			font-size: 12px;
			color: #fff;
			padding-top: 15px;
			padding-bottom: 15px;
		}

		.pt-about .info p {
			font-size: 14px;
			line-height: 24px;
		}

		.pt-about .info-icon {
			padding-top: 45px
		}

		.pt-about .info-icon i {
			display: flex;
			float: left;
			width: 45px;
			height: 45px;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #0e0f10;
			font-size: 20px;
			-webkit-border-radius: 100%;
			border-radius: 100%;
			border: 1px solid #fff;
			margin-right: 15px;
		}

		.pt-about .desc-icon h6 {
			font-size: 15px;
			font-weight: 400;
			line-height: 15px
		}

		.pt-about .desc-icon p {
			color: #fff;
			font-size: 12px;
			line-height: 21px;
		}

		.pt-about .desc-icon {
			padding-left: 15px;
			padding-top: 5px
		}

		/* My Interests */
		.pt-about .inter-icon {
			position: relative;
			background: #0e0f10;
			margin: 20px 0;
			padding: 15px;
			-webkit-border-radius: 15px;
			border-radius: 15px;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.pt-about .inter-icon:after {
			content: '';
			position: absolute;
			width: 2px;
			height: 100%;
			top: 0;
			left: 55px;
			background: #070708;
		}

		.pt-about .inter-icon:hover {
			background: #070708;
		}

		.pt-about .inter-icon i {
			position: relative;
			width: 30px;
			float: left;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 20px;
			margin-right: 30px;
		}

		.pt-about .desc-inter h6 {
			font-size: 15px;
			font-weight: 100;
			line-height: 15px
		}

		.pt-about .desc-inter {
			padding-top: 3px;
		}

		/* Service Block */
		.pt-about .service {
			text-align: center;
		}

		.pt-about .service i {
			position: relative;
			width: 70px;
			height: 70px;
			font-size: 25px;
			line-height: 70px;
			color: #fff;
			background-color: #0e0f10;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}

		.pt-about .service:hover i:after {
			content: '';
			position: absolute;
			width: 60px;
			height: 60px;
			top: 5px;
			left: calc(50% - 30px);
			border-radius: 100%;
			border: 1px solid #fff;
			-webkit-animation: zoomIn .3s ease;
			animation: zoomIn .3s ease;
		}

		.pt-about .service h4 {
			padding-top: 20px;
			padding-bottom: 20px;
		}

		/* Testimonial Block*/
		.pt-about .testimonial-item {
			position: relative;
			padding: 30px;
			margin: 0 15px;
			background-color: rgba(0, 0, 0, .5);
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}

		.pt-about .testimonial-item:before {
			content: "\f10e";
			font-family: "Font Awesome 5 Free";
			position: absolute;
			top: 25px;
			right: 35px;
			color: #fff;
			font-size: 20px;
			font-weight: 900;
		}

		.pt-about .testimonial-item img {
			width: 80px;
			margin-right: 20px;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}

		.pt-about .testimonial-item .content {
			padding-top: 15px;
		}

		.pt-about .testimonial-item .content p {
			color: #777;
			font-size: 13px;
			font-weight: 400;
			padding-top: 10px;
		}

		.pt-about .testimonial-item .rating {
			position: absolute;
			top: 75px;
			right: 25px;
		}

		.pt-about .testimonial-item .rating li {
			display: inline-block;
			color: #fff;
		}

		/* Price */
		.pt-about .price {
			text-align: center;
			margin-bottom: 80px;
		}

		.pt-about .price .head-price:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 4px;
			left: 0;
			background: #0e0f10;
		}

		.pt-about .price .head-price i {
			position: absolute;
			width: 70px;
			height: 70px;
			top: -40px;
			left: 50%;
			color: #fff;
			font-size: 32px;
			background-color: #0e0f10;
			line-height: 70px;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		}

		.pt-about .price:hover i:after {
			content: '';
			position: absolute;
			width: 60px;
			height: 60px;
			top: 5px;
			left: calc(50% - 30px);
			-webkit-border-radius: 100%;
			border-radius: 100%;
			border: 1px solid #fff;
			-webkit-animation: zoomIn .3s ease;
			animation: zoomIn .3s ease;
		}

		.pt-about .price .head-price h4 {
			font-size: 20px;
			padding-top: 25px;
			padding-bottom: 25px;
		}

		.pt-about .price .body-price .price-plan .number {
			font-size: 22px;
			font-weight: 500;
		}

		.pt-about .price .body-price .price-plan {
			padding: 25px 0;
		}

		.pt-about .price .body-price .price-plan .currency {
			position: relative;
			bottom: 10px;
			font-size: 15px;
		}

		.pt-about .price .body-price .price-plan .period {
			position: relative;
			bottom: 0;
			font-size: 14px;
		}

		.pt-about .price .list-price ul li {
			padding-bottom: 10px;
		}

		.pt-about .price .list-price ul li.disable {
			color: #777;
			text-decoration: line-through !important;
		}

		.pt-about .price .footer-price {
			padding-top: 15px;
		}

/* ---------------------------------
		6. Resume Section
		--------------------------------- */
		/* Experience */
		.pt-resume .experience .item {
			position: relative;
			padding-top: 15px;
			padding-left: 40px;
			margin-bottom: 40px;
		}

		.pt-resume .experience .item:before {
			content: '';
			position: absolute;
			width: 1px;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #fff;
		}

		.pt-resume .experience .item:after {
			content: '';
			position: absolute;
			width: 20px;
			height: 1px;
			top: 21px;
			left: 6px;
			background-color: #fff;
		}

		.pt-resume .experience .main p {
			color: #fff;
			font-size: 12px;
		}

		.pt-resume .experience .main p i {
			font-size: 13px;
			margin-right: 5px;
		}

		.pt-resume .experience .main h4 {
			position: relative;
			line-height: 15px;
			margin-bottom: 15px;
		}

		.pt-resume .experience .main h4:before {
			content: '';
			position: absolute;
			width: 13px;
			height: 13px;
			left: -46px;
			background-color: #0e0f10;
			border: 2px solid #fff;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			z-index: 1;
		}

		.pt-resume .experience .item:hover h4:before {
			background-color: #fff;
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		/* Skills Bar */
		.pt-resume .skill-item {
			padding: 0 20px;
		}

		.pt-resume .skill-item .progress-title {
			font-size: 17px;
			margin-bottom: 10px;
		}

		.pt-resume .skill-item .progress {
			height: 8px;
			background-color: #0e0f10;
			margin-bottom: 40px;
			overflow: visible;
		}

		.pt-resume .skill-item .progress .progress-bar {
			position: relative;
			background-color: #fff;
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}

		.pt-resume .skill-item .progress .progress-bar:after {
			content: '';
			position: absolute;
			display: block;
			top: -5px;
			right: 0px;
			padding: 6px;
			background-color: #0e0f10;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 3px solid #fff;
		}

		.pt-resume .skill-item .progress .progress-value {
			position: absolute;
			top: -30px;
			right: 0;
			color: #fff;
			font-size: 14px;
			font-weight: 600;
		}

		.pt-resume .chart {
			width: 130px;
			height: 130px;
			margin: 0 auto 25px;
			text-align: center;
			font-size: 25px;
			line-height: 24px;
			padding: 40px 0 0;
			color: #eee;
			font-weight: 800;
		}

		.pt-resume .chart p {
			font-size: 15px;
			margin-top: 10px;
		}

		.pt-resume canvas {
			position: absolute;
			top: 3px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		}

		/* Work Process */
		.pt-resume .work-process .ltr {
			text-align: right;
		}

		.pt-resume .work-process .rtl {
			text-align: left;
		}

		.pt-resume .work-process .wp-step {
			margin: 0;
			color: #fff;
			font-size: 25px;
			line-height: 50px;
		}

		.pt-resume .work-process h4 {
			font-weight: 700;
			margin-bottom: 15px;
		}

		.pt-resume .work-process .single-wp + .single-wp {
			padding-top: 35px;
		}

		.pt-resume .work-process .wp-circle {
			position: relative;
			width: 100%;
			padding: 80px 0;
			margin-top: 12px;
			text-align: center;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 1px solid #fff;
		}

		.pt-resume .work-process .wp-circle:before {
			content: '';
			position: absolute;
			width: calc(100% + 48px);
			height: calc(100% + 48px);
			top: -24px;
			left: -24px;
			border: 1px solid #fff;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}

		.pt-resume .work-process .wp-circle h4 {
			font-size: 40px;
			font-weight: 700;
			line-height: 62px;
			text-transform: uppercase;
		}

		.pt-resume .work-process .dots {
			position: absolute;
			width: 12px;
			height: 12px;
			display: inline-block;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			background-color: #fff;
		}

		.pt-resume .work-process .dots.top-l,
		.pt-resume .work-process .dots.bottom-l {
			left: 0px;
		}

		.pt-resume .work-process .dots.top-l,
		.pt-resume .work-process .dots.top-r {
			top: 50px;
		}

		.pt-resume .work-process .dots.bottom-l,
		.pt-resume .work-process .dots.bottom-r {
			bottom: 50px;
		}

		.pt-resume .work-process .dots.top-r,
		.pt-resume .work-process .dots.bottom-r {
			right: 0px;
		}

/* ---------------------------------
		7. Portfolio Section
		--------------------------------- */
		/* Portfolio Filter */
		.pt-portfolio .portfolio-filter {
			text-align: center;
		}

		.pt-portfolio .portfolio-filter ul {
			display: inline-block;
			margin: 0;
			-webkit-border-radius: 50px;
			border-radius: 50px;
			-webkit-box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, .1);
			box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, .1);
		}

		.pt-portfolio .portfolio-filter ul li {
			position: relative;
			display: inline-block;
			cursor: pointer;
			font-size: 14px;
			font-weight: 600;
			padding: 10px 25px;
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		.pt-portfolio .portfolio-filter ul li.active {
			color: #0e0f10;
			background-color: #fff;
			-webkit-border-radius: 50px;
			border-radius: 50px;
		}

		/* Portfolio Item */
		.pt-portfolio .portfolio-items .item figure {
			position: relative;
			cursor: pointer;
			background-color: #0e0f10;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			overflow: hidden;
		}

		.pt-portfolio .portfolio-items .item figure img {
			opacity: 1;
			width: 100%;
			height: 100%; 
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		.pt-portfolio .portfolio-items .item figure figcaption {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30px;
			color: #fff;
		}

		.pt-portfolio .portfolio-items .item figure figcaption a {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.pt-portfolio .portfolio-items .item figure figcaption h3 {
			opacity: 0;
			color: #fff;
			font-size: 20px;
			font-weight: 700;
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		.pt-portfolio .portfolio-items .item figure figcaption p {
			position: absolute;
			left: 0;
			bottom: 0;
			margin: 20px;
			font-size: 14px;
			padding-left: 15px;
			opacity: 0;
			-webkit-transform: translateX(-200%);
			-ms-transform: translateX(-200%);
			transform: translateX(-200%);
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		.pt-portfolio .portfolio-items .item figure figcaption p:before {
			content: "\f292";
			font-family: "Font Awesome 5 Free";
			position: absolute;
			top: 0;
			left: 0;
			color: #fff;
			font-weight: 900;
		}

		.pt-portfolio .portfolio-items .item figure figcaption i {
			position: absolute;
			right: 0;
			bottom: 0;
			margin: 20px;
			font-size: 24px;
			opacity: 0;
			-webkit-transform: translateX(200%);
			-ms-transform: translateX(200%);
			transform: translateX(200%);
			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			-o-transition: all .3s;
			transition: all .3s;
		}

		.pt-portfolio .portfolio-items .item figure:hover img {
			opacity: 0.25;
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1); 
		}

		.pt-portfolio .portfolio-items .item figure:hover h3 {
			opacity: 1;
		}

		.pt-portfolio .portfolio-items .item figure:hover p {
			opacity: 1; 
			-webkit-transform: translateX(0%);
			-ms-transform: translateX(0%);
			transform: translateX(0%);
		}

		.pt-portfolio .portfolio-items .item figure:hover i {
			opacity: 1; 
			-webkit-transform: translateX(0%);
			-ms-transform: translateX(0%);
			transform: translateX(0%);
		}

/* ---------------------------------
		8. Blog Section
		--------------------------------- */
		.pt-blog .blog-item {
			position: relative;
			padding: 0 20px 20px;
			margin-bottom: 50px;
			background-color: rgba(0, 0, 0, .5);
			-webkit-border-radius: 10px;
			border-radius: 10px;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.pt-blog .blog-item:hover {
			-webkit-transform: translateY(-3px) scale(1.01);
			-ms-transform: translateY(-3px) scale(1.01);
			transform: translateY(-3px) scale(1.01);
		}

		.pt-blog .blog-item h4 {
			font-weight: 600;
			text-align: center;
			text-transform: uppercase;
			margin: 30px 0;
		}

		.pt-blog .blog-item .thumbnail {
			position: relative;
			overflow: hidden;
			margin: 0 -20px;
			-webkit-border-radius: 10px 10px 0 0;
			border-radius: 10px 10px 0 0;
		}

		.pt-blog .blog-item .thumbnail img {
			width: 100%;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;
		}

		.pt-blog .blog-item:hover .thumbnail img {
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}

		.pt-blog .blog-item .thumbnail .btn-play {
			position: absolute;
			width: 60px;
			height: 60px;
			top: calc(50% - 30px);
			left: calc(50% - 30px);
			display: inline-block;
			border: none;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.pt-blog .blog-item .thumbnail .btn-play:before {
			content: ' ';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			background-color: #fff;
			-webkit-box-shadow: 0 0 50px 0 rgb(14, 15, 16);
			box-shadow: 0 0 50px 0 rgb(14, 15, 16);
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}
		.pt-blog .blog-item .thumbnail .btn-play:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			border-style: solid;
			border-width: 5px 0 5px 10px;
			border-color: transparent transparent transparent #0e0f10;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.pt-blog .blog-item .thumbnail .btn-play:hover:before {
			-webkit-transform: scale(1.2, 1.2);
			-ms-transform: scale(1.2, 1.2);
			transform: scale(1.2, 1.2);
		}

		.pt-blog .blog-item .thumbnail .btn-play:hover:after {
			border-color: transparent transparent transparent #0e0f10;
		}

		.pt-blog .blog-item ul {
			position: relative;
			display: block;
			text-align: center;
			margin-bottom: 20px;
		}

		.pt-blog .blog-item ul li  {
			display: inline-block;
			font-size: 13px;
		}

		.pt-blog .blog-item ul li:not(:last-child):after {
			content: '';
			display: inline-block;
			width: 5px;
			height: 5px;
			margin: 0 8px;
			vertical-align: middle;
			background-color: #fff;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}

		.pt-blog .blog-item .blog-btn {
			position: relative;
			text-align: center;
			margin: 40px 0 10px;
		}

		.pt-blog .blog-item .blog-btn:before {
			content: '';
			position: absolute;
			height: 4px;
			width: calc(100% + 40px);
			top: -25px;
			left: -20px;
			background: #0e0f10;
		}

/* ---------------------------------
		9. Contact Section
		--------------------------------- */
		.contact-form {
			position: relative;
		}

		.contact-form input,
		.contact-form textarea {
			font-size: 15px;
			height: 50px;
			padding-bottom: 10px;
			background: transparent;
			border: none;
			border-bottom: 1px solid #444;
			-webkit-border-radius: 0;
			border-radius: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.contact-form input:focus,
		.contact-form textarea:focus {
			border-bottom: 1px solid #fff;
			-webkit-box-shadow: none;
			box-shadow: none;
			background-color: transparent;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}

		.contact-form textarea {
			height: 100px;
			margin: 50px 0;
		}

		/* Contact info */
		.pt-contact .contact-info {
			text-align: center;
			margin-top: 100px;
		}

		.pt-contact .contact-info .info i {
			font-size: 30px;
			color: #fff;
		}

		.pt-contact .contact-info .info p {
			font-size: 15px;
			line-height: 25px;
			padding: 30px 0 0px;
		}

		.pt-contact .contact-info .info span {
			color: #495057;
		}

		/* Google Map */
		.pt-contact #map {
			width: 100%;
			height: 300px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
		}

		/* Contact validation */
		.contact-valid .error-messages {
			margin-top: 15px;
		}

		.contact-valid label.error {
			display: block;
			color: #ff0000;
			font-size: 14px;
			font-weight: normal;
			margin: 5px 0px 0 10px;
			text-align: left;
		}

		.contact-valid #loader {
			display: none;
			margin-top: 30px;
		}

		.contact-valid #loader i {
			display: inline-block;
			font-size: 23px;
			color: #fff;
			-webkit-animation: rotating linear 2s infinite;
			animation: rotating linear 2s infinite;
		}

		.contact-valid #success,
		.contact-valid #error {
			display: none;
			width: 100%;
			color: #fff;
			padding: 10px 10px;
			margin-bottom: 5px;
			font-size: 14px;
			text-align: center;
		}

		.contact-valid #success i,
		.contact-valid #error i {
			padding-top: 5px;
			margin-right: 10px;
			margin-left: 5px;
		}

		.contact-valid #success i {
			color: #fff;
		}

		.contact-valid #error i {
			color: #ca1d1d;
		}

/* ---------------------------------
		10. Blog Page Css
		--------------------------------- */
		.blog-page {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			overflow: auto;
			background-color: #0e0f10;
		}

		.blog-page .blog-nav {
			position: fixed;
			top: 20px;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
			background-color: rgba(0,0,0,0.7);
			-webkit-border-radius: 20px;
			border-radius: 20px;
			-webkit-box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.15);
			box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.15);
			z-index: 99;
		}

		.blog-page .blog-nav a {
			position: relative;
			height: 30px;
			padding: 0 10px;
			font-size: 14px;
			line-height: 36px;
			text-align:center;
			color: #fff;
		}

		.blog-page .blog-nav a:not(:last-child) {
			border-right:1px solid rgba(255,255,255,0.15);
		}

		.blog-page .blog-nav a:hover,
		.blog-page .blog-nav a:focus {
			color: #fff;
		}

		.blog-page .blog-image {
			background-size: cover;
			-webkit-background-size: cover;
			background-position: center;
		}

		.blog-page .blog-container {
			position: absolute;
			margin: 0 auto;
		}

		.blog-page .blog-heading {
			text-align: center;
			letter-spacing: .5px;
		}

		.blog-page .blog-heading h2 {
			font-size: 40px;
			text-transform: uppercase;
			margin-bottom: 15px;
		}

		.blog-page .blog-heading i {
			color: #fff;
			font-size: 13px;
			margin: 0 5px 0 10px;
		}

		.blog-page .blog-heading span {
			color: #fff;
			font-size: 14px;
		}

		.blog-page .blog-heading span:after {
			content: '';
			margin-left: 10px;
			width: 5px;
			height: 5px;
			background-color: #fff;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			display: inline-block;
			vertical-align: middle;
		}

		.blog-page .blog-heading span:last-child:after {
			display: none;
		}

		.blog-page .blog-content p:first-child::first-letter {
			font-size: 40px;
			font-weight: 700;
			line-height: 1.2;
			float: left;
			text-transform: uppercase;
			padding-right: 15px;
		}

		.blog-page .blog-comments {
			margin: 0 40px;
		}

		.blog-page .blog-comments ul li {
			margin-bottom: 50px;
		}

		.blog-page .blog-comments ul li ul {
			padding: 20px 20px 0;
			background-color: rgba(0, 0, 0, .5);
			-webkit-border-radius: 10px;
			border-radius: 10px;
			margin-left: 60px;
			margin-top: 30px;
		}

		.blog-page .blog-comments ul .author-img {
			float: left;
			margin-right: 20px;
		}

		.blog-page .blog-comments ul li .author-img img {
			-webkit-border-radius: 50%;
			border-radius: 50%;
			max-width: 70px;
		}

		.blog-page .blog-comments ul li .comment-text {
			overflow: hidden;
		}

		.blog-page .blog-comments ul li .comment-text a {
			float: right;
			font-size: 11px;
			margin-right: 15px;
			padding: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			background-color: rgba(0, 0, 0, .5);
		}

		.blog-page .blog-comments ul li .comment-text a i {
			margin-right: 5px;
		}

		.blog-page .blog-comments ul li .comment-text h4 {
			font-weight: 600;
			margin-bottom: 5px;
		}

		.blog-page .blog-comments ul li .comment-text p {
			font-size: 15px;
		}

		.blog-page .blog-comments ul li .comment-text span {
			display: block;
			color: #fff;
			font-size: 12px;
			font-weight: 300;
			margin-bottom: 15px;
		}

/* ---------------------------------
		11. Blog List Css
		--------------------------------- */
		.blog-list {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0px;
			overflow: auto;
			background-color: #0e0f10;
		}

		.blog-list .blog-head {
			padding: 100px 0;
			background-image: url(../img/blog/blog-page-img.jpg);
			background-size: cover;
			-webkit-background-size: cover;
			background-position: center;
		}

		.blog-list .blog-head:before {
			content: '';
			position: absolute;
			height: 285px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: .75;
			background-color: #12171b;
		}

		.blog-list .blog-head h2{
			text-align: center;
			position: relative;
			width: 90%;
			left: 10%;
			font-size: 40px;
			margin-bottom: 15px;
		}

		.blog-list .blog-head .blog-breadcrumb {
			position: relative;
			width: 90%;
			left: 10%;
			text-align: center;
			margin: 0;
		}

		.blog-list .blog-head .blog-breadcrumb li {
			position: relative;
			display: inline-block;
			color: #fff;
			margin-right: 10px;
			padding-right: 10px;
		}

		.blog-list .blog-head .blog-breadcrumb li:after {
			position: absolute;
			content: "\f105";
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			top: 1px;
			right: -6px;
			color: #fff;
		}

		.blog-list .blog-head .blog-breadcrumb li:last-child::after {
			display: none;
		}

		.blog-list .blog-head .blog-breadcrumb li:last-child {
			padding-right: 0px;
			margin-right: 0px;
		}

		.blog-list .blog-list-container {
			position: absolute;
			padding: 100px 0;
			margin: 0 auto;
		}

		.blog-list .blog-post {
			position: relative;
			margin-bottom: 40px;
			border-bottom: 2px solid #070708;
		}

		.blog-list .blog-post .content {
			position: relative;
		}

		.blog-list .blog-post .content .thumbnail {
			position: relative;
			overflow: hidden;
			border-radius: 10px;
		}

		.blog-list .blog-post .content .thumbnail img {
			position: relative;
			display: block;
			width: 100%;
			-webkit-transition: all 1s;
			-moz-transition: all 1s;
			-o-transition: all 1s;
			transition: all 1s;
		}

		.blog-list .blog-post:hover .content .thumbnail img {
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}

		.blog-list .blog-post .content .detalis {
			position: relative;
			padding-top: 20px;
		}

		.blog-list .blog-post .content .detalis .meta {
			position: relative;
		}

		.blog-list .blog-post .content .detalis .meta li {
			position: relative;
			display: inline-block;
			color: #fff;
			font-size: 12px;
			padding: 4px 15px 4px 0;
			margin-right: 2px;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.blog-list .blog-post .content .detalis .meta li i {
			position: relative;
			color: #fff;
			margin-right: 6px;
		}

		.blog-list .blog-post .content .detalis h4 {
			position: relative;
			color: #fff;
			font-weight: 700;
			margin-top: 15px;
		}

		.blog-list .blog-post .content .detalis .text {
			position: relative;
			color: #fff;
			font-size: 14px;
			margin-top: 10px;
			margin-bottom: 25px;
		}

		.blog-list .blog-post .content .detalis .btn-st {
			margin: 10px 10px 50px 10px;
			font-size: 16px;
		}

		.blog-list .blog-post .content .detalis .btn-st:before {
			background: #070708;
		}

		/* Pagination Style */
		.blog-list .pagination {
			justify-content: center;
		}

		.blog-list .pagination li a:hover {
			background: #0e0f10;
			color: #fff !important;
			border: 1px solid transparent;
		}

		.blog-list .pagination li a {
			position: relative;
			display: inline-block;
			background: transparent;
			border: 1px solid #070708;
			border-radius: 50%;
			padding: 9px 16px;
			margin: 5px;
			font-size: 14px;
		}

		.blog-list .pagination li.active a {
			background: #070708;
			color: #fff;
			border: 1px solid transparent;
		}

		/* SideBar Left */

		.blog-list .side-left {
			padding: 0 5px;
		}

		.blog-list .side-left h4 {
			position: relative;
			margin-bottom: 20px;
		}

		.blog-list .side-left h4:after {
			content: '';
			position: absolute;
			width: 40px;
			height: 3px;
			left: 0;
			bottom: -15px;
			background-color: #fff;
		}

		/* Search Style */
		.blog-list .side-left .search {
			background: transparent;
			padding: 5px 0;
			margin-bottom: 50px;
		}

		.blog-list .side-left .search .input-group {
			border: 1px solid #fff;
			border-radius: 50px;
			background: #070708;
		}

		.blog-list .side-left .search .input-group .input-group-text {
			padding: 5px 0px 5px 15px;
			background: transparent;
			color: #fff;
			width: auto;
			border: none;
		}

		.blog-list .side-left .search .input-group .form-control {
			font-size: 14px;
			font-weight: 100;
			color: #fff;
			background: transparent;
			border: none !important;
			border-radius: 50px;
			padding-left: 20px;
		}

		/* Categories and Archives */
		.blog-list .side-left .categories,
		.blog-list .side-left .archives {
			margin-bottom: 50px;
		}

		.blog-list .side-left .categories ul,
		.blog-list .side-left .archives ul {
			position: relative;
		}

		.blog-list .side-left .categories ul li,
		.blog-list .side-left .archives  ul li {
			position: relative;
			padding: 15px 10px 15px 20px;
			border-bottom: 1px solid #070708;
		}

		.blog-list .side-left .categories ul li:before,
		.blog-list .side-left .archives  ul li:before {
			content: '';
			position: absolute;
			width: 8px;
			height: 8px;
			left: 0;
			top: 22px;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 2px solid #fff;
			-webkit-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-o-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
		}

		.blog-list .side-left .categories ul li:hover:before,
		.blog-list .side-left .archives ul li:hover:before {
			border: 4px solid #fff;
			box-shadow: 0 0 5px 0px #fff;
		}

		/* Recent News */
		.blog-list .side-left .news {
			margin-bottom: 50px;
		}

		.blog-list .side-left .news li {
			display: flex;
			align-items: center;
			margin: 0;
			padding: 15px 0;
			border-bottom: 1px solid #070708;
		}

		.blog-list .side-left .news img {
			width: 47px;
			height: 47px;
			margin-right: 15px;
			border-radius: 100%;
		}

		.blog-list .side-left .news h5 {
			position: relative;
			margin: 0;
			padding-bottom: 7px;
			font-size: 15px;
		}

		.blog-list .side-left .news p {
			margin: 0;
			color: #fff;
			font-size: 12px;
		}

		.blog-list .side-left .news p i {
			margin-right: 5px;
		}

		/* Gallery */
		.blog-list .side-left .gallery {
			margin-bottom: 50px;
		}

		.blog-list .side-left .gallery ul {
			padding-top: 15px;
		}

		.blog-list .side-left .gallery ul li {
			max-width: 70px;
			position: relative;
			display: inline-block;
			width: 25%;
			padding: 0px 3px;
			margin-bottom: 9px;
		}

		/* Tags */
		.blog-list .side-left .tags {
			margin-bottom: 50px;
		}

		.blog-list .side-left .tags ul li {
			display: inline-block;
		}

		.blog-list .side-left .tags ul {
			padding-top: 15px;
		}

		.blog-list .side-left .tags ul li a {
			position: relative;
			display: inline-block;
			line-height: 24px;
			padding: 8px 19px;
			margin: 0px 5px 10px 0px;
			color: #fff;
			text-align: center;
			background-color: #070708;
			border: 1px solid #070708;
			border-radius: 20px;
		}

		.blog-list .side-left .tags ul li a:hover {
			background-color: #070708 !important;
		}

/* ---------------------------------
		12. Preloader Css
		--------------------------------- */
		#preloader {
			position: fixed;
			width: 100%;
			height: 100%;
			z-index: 5000;
		}

		#preloader.loaded {
			visibility: hidden;
		}

		#preloader.loaded .loading-area {
			opacity: 0;
		}

		#preloader .loading-area {
			position: absolute;
			width: 50%;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			opacity: 1;
			z-index: 1;
			-webkit-transition: all .5s ease-in-out;
			-moz-transition: all .5s ease-in-out;
			-o-transition: all .5s ease-in-out;
			transition: all .5s ease-in-out;
		}

		#preloader.loaded .loading-area .circle {
			width: 50px;
			height: 50px;
			margin: 0 auto 50px auto;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			border: 3px solid #fff;
			border-top-color: #0e0f10;
			-webkit-animation: spinner 1s infinite linear;
			animation: spinner 1s infinite linear;
		}

		#preloader.loaded .left-side {
			-webkit-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			transform: translateX(-100%);
			transition-delay: 1s;
		}

		#preloader .left-side {
			left: 0;
		}

		#preloader.loaded .right-side {
			-webkit-transform: translateX(100%);
			-ms-transform: translateX(100%);
			transform: translateX(100%);
			transition-delay: 1s;
		}

		#preloader .right-side {
			right: 0;
		}

		#preloader .left-side, 
		#preloader .right-side {
			position: absolute;
			width: 50%;
			height: 100%;
			background: #0e0f10;
			-webkit-transition: all .7s ease-in-out;
			-moz-transition: all .7s ease-in-out;
			-o-transition: all .7s ease-in-out;
			transition: all .7s ease-in-out;
		}

/* ---------------------------------
		13. Tooltip Css
		--------------------------------- */

		[data-tooltip] {
			position: relative;
		}

		[data-tooltip]:after {
			position: absolute;
			visibility: hidden;
			opacity: 0;
			-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			z-index: 99;
			-webkit-transition: transform .3s ease, opacity .3s;
			-moz-transition: transform .3s ease, opacity .3s;
			-o-transition: transform .3s ease, opacity .3s;
			transition: transform .3s ease, opacity .3s;
		}

		[data-tooltip]:after {
			content: attr(data-tooltip);
			font: normal 10px 'Poppins',sans-serif;
			background-color: #000;
			color: #fff;
			padding: 10px 15px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			white-space: nowrap;
			letter-spacing: 1px;
			text-transform: uppercase;
		}

		[data-tooltip]:hover:after {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
		}

		[data-tooltip][data-position="top"]:after {
			bottom: 100%;
			margin-bottom: 25px;
			-webkit-transform: translateY(10px);
			-ms-transform: translateY(10px);
			transform: translateY(10px);
		}

		[data-tooltip][data-position="top"]:hover:after {
			-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
		}

		[data-tooltip][data-position="left"]:after {
			right: 100%;
			margin-right: 10px;
			-webkit-transform: translateX(0px);
			-ms-transform: translateX(0px);
			transform: translateX(0px);
		}

		[data-tooltip][data-position="left"]:hover:after {
			-webkit-transform: translateX(-10px);
			-ms-transform: translateX(-10px);
			transform: translateX(-10px);
		}

		[data-tooltip][data-position="right"]:after {
			left: 100%;
			margin-left: 10px;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		[data-tooltip][data-position="right"]:hover:after {
			-webkit-transform: translateX(10px);
			-ms-transform: translateX(10px);
			transform: translateX(10px);
		}

		[data-tooltip][data-position="bottom"]:after {
			top: 100%;
			margin-top: 25px;
			-webkit-transform: translateY(-10px);
			-ms-transform: translateY(-10px);
			transform: translateY(-10px);
		}

		[data-tooltip][data-position="bottom"]:hover:after {
			-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
		}

/* ---------------------------------
		14. Responsible Css
		--------------------------------- */
		@media screen and (max-width: 991px) {
			.pt-home .banner h1 {
				font-size: 60px;
			}
			.pt-home .banner p {
				font-size: 25px;
			}
			.pt-about .btn-st {
				margin: 0 0 20px 20px;
			}
			.single-wp {
				padding: 30px !important;
			}
			.single-wp:nth-child(2n) {
				text-align: left;
				padding-right: 0 !important;
			}
			.single-wp.process-1,
			.single-wp.process-3 {
				border-right: 1px solid #fff;
			}
			.single-wp.process-1,
			.single-wp.process-2 {
				border-bottom: 1px solid #fff;
			}
			.single-wp:nth-child(2n+1) {
				text-align: right;
				padding-left: 0 !important;
			}
			.hidden-sm {
				display: none;
			}
			.width-sm {
				width: 50%;
				float: left;
			}
			.pt-contact .contact-info .info {
				margin-bottom: 40px;
			}
			.page .mob-box-mt {
				margin-top: 100px !important;
			}
		}

		@media screen and (max-width: 768px) {
			.social{
				margin-bottom: 161px!important;
			}
			
			.page {
				width: 100%;
			}
			#about:target .pt-about,
			#resume:target .pt-resume,
			#portfolio:target .pt-portfolio,
			#blog:target .pt-blog,
			#contact:target .pt-contact {
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}
			.header-main {
				width: 90px;
				background-color: rgba(14, 15, 16, 1);
				-webkit-transition: all .3s ease-in-out;
				-o-transition: all .3s ease-in-out;
				transition: all .3s ease-in-out;
			}
			.header-mobile {
				display: block;
				-webkit-transition: all .3s ease-in-out;
				-o-transition: all .3s ease-in-out;
				transition: all .3s ease-in-out;
			}
			.header-main ul li {
				font-size: 25px;
			}
			.header-main .logo,
			.music-bg {
				padding: 20px 0;
			}
			.page .mob-mt {
				margin-top: 120px !important;
			}
			.page .header-page h2 {
				font-size: 32px;
			}
			.pt-home .banner h1 {
				font-size: 50px;
			}
			.pt-home .banner p {
				font-size: 20px;
			}
			.page .box {
				padding: 20px;
			}
			.pt-about .testimonial-item {
				padding: 20px;
			}
			.blog-nav {
				display: none;
			}
			.blog-page .blog-container {
				position: relative;
			}
		}

		@media screen and (max-width: 575px) {
			.page .header-box h3 {
				font-size: 23px;
			}
			.pt-home .banner {
				width: 100%;
			}
			.pt-home .banner h1 {
				font-size: 40px;
			}
			.pt-home .banner p {
				font-size: 17px;
			}
			.pt-home .social {
				top: unset;
				bottom: 10px;
			}
			.pt-home .lang {
				bottom: 20px;
			}
			.pt-about .info .photo img {
				display: block;
				width: 50%;
				margin: 0 auto 30px;
			}
			.pt-about .testimonial-item:before {
				top: 15px;
				right: 15px;
				font-size: 15px;
			}
			.pt-about .testimonial-item img {
				width: 70px;
			}
			.pt-about .testimonial-item .rating {
				top: 115px;
				left: 20px;
			}
			.pt-about .testimonial-item .media {
				margin-bottom: 30px;
			}
			.pt-about .testimonial-item .content {
				padding-top: 10px;
			}
			.pt-resume .chart {
				margin: 0 auto 40px;
			}
			.pt-portfolio .portfolio-filter ul {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.width-sm {
				width: 100%;
			}
			.single-wp.process-1,
			.single-wp.process-3 {
				border-bottom: none;
				border-right: 1px solid #fff;
			}
			.single-wp.process-2,
			.single-wp.process-4 {
				border-bottom: none;
				border-left: 1px solid #fff;
			}
			.blog-page .blog-heading h2 {
				font-size: 30px;
			}
			.blog-page .blog-heading span {
				font-size: 13px;
			}
			.blog-page .blog-comments,
			.blog-page .blog-comments ul li .comment-text a {
				margin: 0;
			}
			.blog-page .blog-comments ul li .comment-text p {
				font-size: 13px;
			}
			.blog-page .blog-comments ul li ul {
				margin-left: 30px;
			}
		}

		@media screen and (min-height: 710px) {
			.music-bg {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
			} 
		}

/* ---------------------------------
		15. Animation Css
		--------------------------------- */
		/* Animation zoomIn */ 
		@-webkit-keyframes zoomIn {
			from {
				opacity: 0;
				-webkit-transform: scale3d(0.3, 0.3, 0.3);
				transform: scale3d(0.3, 0.3, 0.3);
			}

			50% {
				opacity: 1;
			}
		}

		@keyframes zoomIn {
			from {
				opacity: 0;
				-webkit-transform: scale3d(0.3, 0.3, 0.3);
				transform: scale3d(0.3, 0.3, 0.3);
			}

			50% {
				opacity: 1;
			}
		}

		/* Animation rotating */ 
		@-webkit-keyframes rotating {
			from {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			to {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

		@keyframes rotating {
			from {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			to {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

		/* Animation Spinner */
		@-webkit-keyframes spinner {
			to {
				-webkit-transform: rotateZ(360deg);
				transform: rotateZ(360deg);
			}
		}

		@keyframes spinner {
			to {
				-webkit-transform: rotateZ(360deg);
				transform: rotateZ(360deg);
			}
		}

		/* Animation Music Line */
		@-webkit-keyframes musicline {
			0% {height: 5px;}
			10% {height: 10px;}
			20% {height: 5px;}
			30% {height: 14px;}
			40% {height: 18px;}
			50% {height: 5px;}
			60% {height: 16px;}
			70% {height: 10px;}
			80% {height: 12px;}
			90% {height: 4px;}
			100% {height: 18px;}
		}

		@keyframes musicline {
			0% {height: 5px;}
			10% {height: 10px;}
			20% {height: 5px;}
			30% {height: 14px;}
			40% {height: 18px;}
			50% {height: 5px;}
			60% {height: 16px;}
			70% {height: 10px;}
			80% {height: 12px;}
			90% {height: 4px;}
			100% {height: 18px;}
		}

		/* Ken Burns Slide */ 
		@-webkit-keyframes kenburnsSlide {
			0% {
				opacity: 0;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
			5% {
				opacity: 1
			}
			25% {
				opacity: 1
			}
			40% {
				opacity: 0;
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
			100% {
				opacity: 0;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}

		@keyframes kenburnsSlide {
			0% {
				opacity: 0;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
			5% {
				opacity: 1
			}
			25% {
				opacity: 1
			}
			40% {
				opacity: 0;
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
			100% {
				opacity: 0;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}

		.clearfix p{
			float: left;
		}